<!DOCTYPE html>
<html style="overflow: hidden">
  <head>
    <title>Demos</title>
    <!-- This tag improves the experience on mobile browsers. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
        maximum-scale=1.0, user-scalable=0">

    <!-- These tags improve web apps on ios. -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style type="text/css">
      body {
        font-family: "Courier New", monospace;
      }

      #fps {
        color: #f00;
        left: 800px;
        top: 35px;
        position: absolute;
        display: none;
      }

      #world-step {
        color: #f00;
        left: 660px;
        top: 50px;
        position: absolute;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1 id="title"></h1>
    <div id="fps">FPS: <span id="fps-counter"></span></div>
    <div id="world-step">
      world.step time: <span id="world-step-time"></span>
    </div>
    <script type="text/javascript">
      var demos = [
        'BallCage',
        'Bench2d',
        'BlobTest',
        'BoxTest',
        'CircleStress',
        'DominoTest',
        'DominoTower',
        'FrictionJointTest',
        'racer/racer'
      ];

      function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (pair[0] == variable) {
                return unescape(pair[1]);
            }
        }
        return null;
      }

      console.log('Checking for specific demo');
      var demo = getQueryVariable('demo');
      if (demo && demos.indexOf(demo) != -1) {
        console.log('Loading ' + demo);
        document.getElementById('fps').style.display = 'block';
        document.getElementById('world-step').style.display = 'block';
        var script = document.createElement('script');
        script.setAttribute('type', 'application/dart');
        script.setAttribute('src', 'example/demos/' + demo + '.dart');
        document.body.appendChild(script);
      } else {
        console.log('Creating menu');
        document.getElementById('fps').style.display = 'none';
        document.getElementById('world-step').style.display = 'none';
        document.body.appendChild(document.createTextNode('Choose a demo:'));
        var menu = document.createElement('ul');
        for (var d in demos) {
          var item = document.createElement('li');
          var link = document.createElement('a');
          link.setAttribute('href', window.location.href + '?demo=' + demos[d]);
          link.appendChild(document.createTextNode(demos[d]));
          item.appendChild(link);
          menu.appendChild(item);
        }
        document.body.appendChild(menu);
      }
    </script>
    <script
      src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js">
    </script>
  </body>
</html>


